import React, { useState } from 'react';
import { Button } from 'antd';
import {
    useMount,
    useUpdateEffect,
    useUpdate,
    useLocalStorageState,
    useSessionStorageState,
    useEventEmitter,
} from '../../hooks';
// import { useEventEmitter } from 'ahooks';
import Child from './Child';
import Child2 from './Child2';

const Demo = () => {
    const [val, setVal] = useState(0);
    useUpdateEffect(() => { // 模拟挂载
        // console.log(`value${val}`);
    }, [val]);
    useMount(() => { // 依赖更新时执行
        // console.log(`value${val}`);
    });
    const update = useUpdate(); // 触发render
    const [value, setValue] = useLocalStorageState('value', 0);
    const [value2, setValue2] = useSessionStorageState('value2', 0);
    const [value3, setValue3] = useSessionStorageState('value3', { value3: 0 });
    const event$ = useEventEmitter();
    event$.useSubscription((type, val) => {
        console.log(type, val);
    });
    const add = () => {
        event$.useSubscription((type, val) => {
            console.log(type, val);
        });
    };
    return (
        <>
            <div>
                val: {val}
                <Button onClick={() => setVal(val + 1)}>val++</Button>
                自定义hook测试
                <br/>
                <div>Time: {Date.now()}<Button onClick={update}>update</Button></div>
                <div>
                    value:{value}
                    <Button onClick={() => setValue(value + 1)} type='primary'>value++</Button>
                </div>
                <div>
                    value2:{value2}
                    <Button onClick={() => setValue2(value2 + 1)} type='primary'>value2++</Button>
                </div>
                <div>
                    value3:{value3.value3}
                    <Button onClick={() => setValue3({ value3: value3.value3 + 1 })} type='primary'>value3++</Button>
                </div>
                <div>
                    <Button onClick={() => event$.emit('add', 100)}>event$</Button>
                    <button onClick={add}>add</button>
                    <Child event$={event$}/>
                    <Child2 event$={event$}/>
                </div>
            </div>
        </>
    );
};
export default Demo;
